<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" href="../css/vant.index.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%
        }

        body {
            background: url(../images/system_image/login_reg_bg.jpg) no-repeat top left;
            background-size: cover;
        }

        .backdrop {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background-color: black;
            opacity: 0.8;
            z-index: -1;
        }

        .wrap {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 10;
            /*background-color: #e3007f*/
        }

        .wrap .System_blank {
            width: 100%;
            height: 40px;
            /*background-color: #e3007f*/
        }

        .wrap .header {
            width: 100%;
            height: 25px;
            color: white;
            /*background-color: rgb(249, 234, 119);*/
        }

        .wrap .header .back {
            float: left;
            margin-left: 10px;
            width: 30px;
            height: 30px;
        }
		.wrap .header .back span.iconfont.icon-to-left{
			width: 30px;
            height: 30px;
		}

        .wrap .header .title {
            position: absolute;
            width: 100%;
            text-align: center;
			z-index:-1;
        }

        .wrap .content {
            box-sizing: border-box;
            width: auto;
            height: auto;
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 50px;
            margin-bottom: 60px;
            /*background-color: rgb(249, 234, 119);*/
        }

        .wrap .row {
            box-sizing: border-box;
            width: auto;
            height: 60px;
            border-bottom: 1px solid white;
        }

        .wrap .row .item {
            position: absolute;
            float: left;
            width: 20px;
            height: 60px;
            line-height: 60px;
            color: white;
        }

        .wrap .row .input {
            width: 70%;
            height: 60px;
            margin-left: 32px;
            line-height: 60px;
            border: none;
            outline: none;
            font-size: 16px;
            color: rgb(169, 169, 169);
            background-color: rgba(0, 0, 0, 0);
        }

        .wrap .row .code {
            position: absolute;
            float: right;
            width: 50px;
            height: 60px;
            line-height: 60px;
            background-color: rgb(249, 234, 119);
        }

        .wrap .button {
            width: auto;
            height: 40px;
            margin-top: 60px;
            background-color: rgb(249, 234, 119);
            color: rgb(62, 62, 62);
            line-height: 40px;
            text-align: center;
            border-radius: 8px;
        }

        .wrap .Other {
            width: 100%;
            height: 40px;
            margin-top: 20px;
        }

        .wrap .Other .Register {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: left;
            color: rgb(249, 234, 119);
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
        }

        .wrap .Other .Forget {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: right;
            color: white;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 8px;
        }

        .wrap .tips {
            width: 100%;
            height: 40px;
            margin: 0 auto;
            margin-top: 20px;
            text-align: center;
            color: white;
        }

        .wrap .WXLogin {
            width: 40px;
            height: 40px;
            margin: 0 auto;
            background-image: url(../images/system_image/WXIcon.png);
            background-size: 40px 40px;
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 20px;
        }

        .button:active,
        .back:active {
            opacity: 0.7;
        }
    </style>
</head>
<script type="text/javascript" src="../script/vue.js"></script>
<body>
    <div id="app">
        <div class="wrap">
            <div class="System_blank"></div>
            <div class="header">
                <div class="title">
                    <h1>登录</h1>
				</div>
                <div class="back" @click="fncloseWin"><span class="iconfont icon-to-left"></span></div>
            </div>
            <div class="content">
                <div class="row">
                    <div class="item">
                        <span class="iconfont icon-chengyuanshenfen" aria-hidden="true"></span>
                    </div>
                    <input id="userid_tele" class="input" type="text" placeholder="请输入您的账号" v-model="userName">
                </div>
                <div class="row">
                    <div class="item">
                        <span class="iconfont icon-mima" aria-hidden="true"></span>
                    </div>
                    <input id="password1" class="input" type="password" placeholder="请输入密码" v-model="userPassword">
                </div>
                <div class="button" @click="fnLogin">登录</div>
                <div class="Other">
                    <div class="Register" tapmode="highlight" onclick="fnRegister();">注册</div>
                    <div class="Forget" tapmode="highlight">忘记密码？</div>
                </div>
                <div class="tips">微信快速登录</div>
                <div class="WXLogin" tapmode="highlight" onclick="fnLoginFromWX();">
                </div>
            </div>
        </div>
        <div class="backdrop"></div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/axios.min.js"></script>
<script type="text/javascript" src="../script/SHA1.js"></script>
<script type="text/javascript" src="../script/myscript.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            backbtn: false,
            loginbtn: false,
            userName: '',
            userPassword: ''
        },
        created() {
            var user = $api.getStorage('userInfo');
            if (user != null) {
                this.userName = user.username;
            }
        },
        methods: {
            fncloseWin: function() {
                window.location.href = '../index.html';
            },
            fnLogin: function() {
				//alert("66");
                var _this = this;
                if (app.userName && app.userPassword) {
                    var now = Date.now();
                    var _AppId = $blt.getAppId();
                    var _appKey = $blt.getAppKey();
                    var appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
                    var url = 'https://d.apicloud.com//mcm/api/user/login';
                    var log ={};
                    log.username = app.userName;
                    log.password = app.userPassword;
                    axios({
                        method: 'post',
                        url: url,
                        headers: {
                            'X-APICloud-AppId': _AppId,
                            'X-APICloud-AppKey': appKey
                        },
                        data: log
                    }).then(function(response) {
                        var loginId = response.data.id;
                        if (loginId && response.data.userId) {
                            now = Date.now();
                            appKey = SHA1(_AppId, "UZ", _appKey, "UZ" + now) + "." + now;
                            var url = 'https://d.apicloud.com//mcm/api/user/' + response.data.userId;
                            axios.get(url, {
                                headers: {
                                    'X-APICloud-AppId': _AppId,
                                    'X-APICloud-AppKey': appKey,
                                    'authorization': loginId
                                }
                            }).then(function(response) {
                                if (response.data.blt_name) {
                                    var userinfo = response.data;
                                    userinfo.loginId = loginId;
                                    $api.setStorage('userInfo', userinfo);
                                    window.location.href = '../index.html';
                                } else {
                                    _this.$toast({
                                        message: '登录失败',
                                        position: 'bottom'
                                    });
                                }
                                console.log(response);
                            }).catch(function(error) {
                                console.log(error);
                                _this.$toast({
                                    message: '登录失败',
                                    position: 'bottom'
                                });
                            });
                        } else {
                            _this.$toast({
                                message: '登录失败',
                                position: 'bottom'
                            });
                        }
                    }).catch(function(error) {
                        console.log(error);
                        //alert(JSON.stringify(error));
                        _this.$toast({
                            message: '登录失败',
                            position: 'bottom'
                        });
                    });
                }
            }
        }
    })

    function fnRegister() {
        window.location.href = "./register.html";
    }

    function fncloseWin() {
		alert("66");
	}
</script>

</html>
